import { Button, Card, Dropdown, Menu, Modal } from "antd";
import { useDeleteTask, useTask } from "utils/task";
import { useTaskTypes } from "utils/task-type";
import { Kanban } from "../../type/kanban";
import { useKanbansQueryKey, useTaskModal, useTaskSearchParams } from "screens/kanban/util";
import taskIcon from "assets/task.svg";
import bugIcon from "assets/bug.svg";
import styled from "@emotion/styled";
import { Task } from "type/task";
import { CreateTask } from "./create-task";
import { Row } from "components/lib";
import { useDeleteKanban } from "utils/kanban";

const TaskTypeIcon = ({ id }: { id: number }) => {
    const { data: taskTypes } = useTaskTypes();
    const name = taskTypes?.find((taskType) => taskType.id === id)?.name
    if (!name) {
        return null
    }
    return <img alt={''} src={name === 'task' ? taskIcon : bugIcon} />
}

const TaskCard = ({ task, keyword }: { task: Task, keyword: string }) => {
    const arr = task?.name.split(keyword) || [];
    const { startEdit } = useTaskModal();
    const editStart = (task: Task) => {
        startEdit(task.id)
    }

    return <Card onClick={() => editStart(task)} style={{ marginBottom: "0.5rem", cursor: "pointer" }} key={task.id}>
        <p>
            {
                !keyword ? task.name :
                    arr.map((item, index) =>
                        <span key={index}>{item}
                            {
                                index === arr.length - 1 ?
                                    null :
                                    <span style={{ color: 'red' }} key={index}>{keyword}</span>
                            }
                        </span>)
            }
        </p>
        <TaskTypeIcon id={task.typeId} />
    </Card>
}

export const KanbanColumn = ({ kanban }: { kanban: Kanban }) => {
    const { data: tasks } = useTask(useTaskSearchParams());
    const { name: keyword } = useTaskSearchParams();
    const currentTasks = tasks?.filter((task) => task.kanbanId === kanban.id);
    return (
        <Container>
            <Row between={true}>
                <h3>{kanban.name}</h3>
                <More kanban={kanban} />
            </Row>
            <TasksContainer>
                {
                    currentTasks?.map(task => {
                        return <TaskCard task={task} key={task.id} keyword={keyword} />
                    })
                }
                <CreateTask kanbanId={kanban.id} />
            </TasksContainer>
        </Container>
    )
}

const More = ({ kanban }: { kanban: Kanban }) => {
    const { mutateAsync: deleteKanban } = useDeleteKanban(useKanbansQueryKey());
    const startDelete = () => {
        Modal.confirm({
            okText: "确定",
            cancelText: "取消",
            title: "确定删除看板吗",
            onOk() {
                return deleteKanban({ id: kanban.id })
            }
        })
    }
    return <Dropdown overlay={
        <Menu>
            <Menu.Item>
                <Button type={'link'} onClick={startDelete}>删除</Button>
            </Menu.Item>
        </Menu>
    }>
        <Button type={'link'}>...</Button>
    </Dropdown>
}

export const Container = styled.div`
  min-width: 27rem;
  border-radius: 6px;
  background-color: rgb(244, 245, 247);
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.7rem 1rem;
  margin-right: 1.5rem;
`;

const TasksContainer = styled.div`
  overflow: scroll;
  flex: 1;

  ::-webkit-scrollbar {
    display: none;
  }
`;